<script lang="ts" setup>
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { routersList } from '@/router/index'
import { computed } from 'vue'

const route = useRoute()
console.log('route', route)

const elementUiAdminMenu = ['elementUIdemo1', 'userManage', 'roleManage']
const headershow = computed(() => {
  return elementUiAdminMenu.includes(route.name as string)
})
</script>

<template>
  <header v-if="!headershow">
    <div class="wrapper">
      <nav>
        <!-- v-for循环渲染路由 -->
        <RouterLink v-for="item in routersList" :key="item.name" :to="{ path: item.path }">
          {{ item.title }}
        </RouterLink>

        <!-- 命名路由 -->
        <RouterLink :to="{ name: 'wangluoDemo2' }">命名路由</RouterLink>

        <!-- 路由嵌套 -->
        <router-link to="/luyouDemo1/luyousonDemo1">嵌套路由</router-link>

        <!-- 路由传参 -->
        <router-link
          :to="{ name: 'luyousonDemo1', params: { userId: '1232456', userName: '苏陈凤' } }"
          >路由传参
        </router-link>
      </nav>

      <!-- <nav>
        <RouterLink to="/Kaoshi1"> 考试1 </RouterLink>
        <RouterLink to="/Kaoshi2"> 考试2 </RouterLink>
        <RouterLink to="/Kaoshi3"> 考试3 </RouterLink>
        <RouterLink to="/Kaoshi4"> 考试4 </RouterLink>
        <RouterLink to="/Kaoshi5"> 考试5 </RouterLink>
        <hr />
        <RouterLink to="/demo1"> demo1 </RouterLink>
        <RouterLink to="/demo2"> demo2 </RouterLink>
        <RouterLink to="/demo3"> demo3 </RouterLink>
        <hr />
        <RouterLink to="/wangluoDemo1"> wangluoDemo1 </RouterLink>
        <RouterLink to="/wangluoDemo2"> wangluoDemo2 </RouterLink>
      </nav> -->
    </div>
  </header>

  <RouterView />
</template>

<style lang="scss" scoped>
header {
  border-bottom: 1px solid var(--color-border2);
  padding: 10px 0;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;

  a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
    color: blue;
    margin: 5px 0;
  }
}
</style>
